<template>
    <div>
        <van-nav-bar title="van-tag用法"></van-nav-bar>
        <van-tag color="#aaff33" size="large" text-color="#a00">标签</van-tag>
        <van-tag color="#aaff33" size="medium" text-color="#a00">标签</van-tag>
        <van-tag  type="primary">标签</van-tag>
    </div>
    <div class="new">
        <van-nav-bar title="每周上新"/>
     
        <van-grid :column-num="2"  :border="false">
            <van-grid-item v-for="(item,index) in newList" :key="index">
                <van-image :src="item.list_pic_url"></van-image>
                <p>{{ item.name }}</p>
                <p><span>￥</span>{{ item.retail_price }}</p>
            </van-grid-item>
        </van-grid>
    </div>
    <div class="content">

        <van-nav-bar title="人气推荐"></van-nav-bar>
        <van-card v-for="(item, index) in productList" 
            :key="index" 
            :title="item.name"
            :price="item.retail_price"
            :thumb="item.list_pic_url"
            :tag="item.tag" :desc="item.goods_brief" 
            :origin-price="item.origin_price">

            <template #tags>
                <div class="tags-container">
                    <van-tag v-for="(tagItem, tagIndex) in item.tags" type="primary" plain :key="tagIndex">{{ tagItem }}</van-tag>
                </div>

            </template>
            <template #footer>
                <van-button type="primary" plain size="mini" round @click="getInfo(item.id)">详情信息</van-button>
                  <van-button type="primary" plain size="mini" round @click="addCart(item)">加入购物车</van-button>
            </template>
        </van-card>
    </div>
</template>
<script setup>
import router from '../router.js'
const newList = [
  { name: '懒人小沙发', list_pic_url: '/images/new1.jpg', retail_price: '128.00' },
  { name: '减压弹力球', list_pic_url: '/images/new2.jpg', retail_price: '89.00' },
  { name: '简约一字夹发夹', list_pic_url: '/images/new3.jpg', retail_price: '12.8' },
  { name: '毛线小兔子耳朵发夹', list_pic_url: '/images/new4.jpg', retail_price: '9.9' }
]
const productList = [
    {
        id:1,
        retail_price: '299.00',
        name: '蚕丝被 正品桑蚕丝',
        goods_brief: '一级桑蚕丝，轻盈、透气、柔软',
        list_pic_url: '/images/top1.jpg',
        tags: ['标签1', '标签2'],
        tag: 'TOP1'
    },
    {
        id:2,
        retail_price: '88.00',
        origin_price: '98.00',
        name: '儿童摇摇马',
        goods_brief: '安全、不会侧翻、爸妈放心',
        list_pic_url: '/images/top2.jpg',
        tag: 'TOP2',
        tags: ['标签3', '标签4'],
    },
    {
        id:3,
        retail_price: '128.00',
        origin_price: '168.00',
        name: '可躺可睡休闲懒人沙发',
        goods_brief: '轻松看书、社交、办公、舒适放松',
        list_pic_url: '/images/top3.jpg',
        tag: 'TOP3',
        tags: ['标签5', '标签6'],
    },
    {
        id:4,
        retail_price: '199.00',
        origin_price: '205.00',
        name: '儿童积木 拼装玩具',
        goods_brief: '大颗粒 家长更放心 不易吞咽、安全性高',
        list_pic_url: '/images/top4.jpg',
        tag: 'TOP4',
        tags: ['标签7', '标签8'],
    },
    {
        id:5,
        retail_price: '89.00',
        origin_price: '99.00',
        name: '扭扭车 1——3岁男女宝宝',
        goods_brief: '儿童扭扭车万向轮 防侧翻大人新款摇摆扭扭车',
        list_pic_url: '/images/top5.jpg',
        tag: 'TOP5',
        tags: ['标签9', '标签10'],
    }
]
const getInfo= (id)=>{
    console.log(id);
    router.push('/goodsInfo/'+id)
}
const addCart= (item)=>{
    console.log(item)
}
</script>
<style lang="less" scoped>
 .van-nav-bar{
    margin:10px auto;
    padding: 10px 0;;
    width:60%;
    border-top:3px solid #aaa;
}
.content {

    --van-tag-primary-color: #FF8000;
    --van-card-font-size: 16px;
    --van-card-price-color: red;
    

    .tags-container .van-tag:first-child {
        margin-right: 10px;
    }

   

}

.van-nav-bar {
    --van-nav-bar-title-font-size: 22px;
}
.new span{
    color:#f90;
}
</style>